<template>
	<view class="order">
		<view class="order-address">
			<view class="left">
				<u-image width="48rpx" height="48rpx" src="@/static/images/address.png"></u-image>
			</view>
			<view class="center">
				<view class="u-font-bold u-main-color u-font-28">
					{{storeInfo.storeName}}
				</view>
				<view class="u-font-24">
					{{storeInfo.storeAddress}}
				</view>
			</view>
			<view class="right">
				<u-icon name="arrow-right" color="#999"></u-icon>
			</view>
		</view>
		<view class="contactsInfo">
			<view class="item">
				<view class="left">联系人</view>
				<view class="right" @click="liaisonShow=true">
					<text class="u-tips-color u-font-24" v-if="!condition.contactUser">请填写联系人姓名</text>
					<text class="u-main-color u-font-24" v-else>{{condition.contactUser}}</text>
				</view>
			</view>
			<view class="item">
				<view class="left">联系电话</view>
				<view class="right" @click="liaisonShow=true">
					<text class="u-tips-color u-font-24" v-if="!condition.contactTel">请填写联系人电话</text>
					<text class="u-main-color u-font-24" v-else>{{condition.contactTel}}</text>
				</view>
			</view>
			<view class="item">
				<view class="left">配送方式</view>
				<view class="right">
					<u-radio-group v-model="condition.shippingCode">
						<u-radio v-for="(item,index) in shoppingCodeList" :key="index" :name="item.dictValue" label-size="24" icon-size="24"
						><text class="u-main-color">{{item.dictName}}</text></u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="item">
				<view class="left">支付方式</view>
				<view class="right">
					<u-radio-group v-model="condition.payType">
						<u-radio v-for="(item,index) in payTypeList" :key="index" :name="item.dictValue" label-size="24" icon-size="24">
							<text class="u-main-color">{{item.dictName}}</text>
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		<view class="prescriptionInfo">
			<view class="top">
				<view class="left">
					<text class="u-main-color u-font-bold u-font-28 u-m-r-8 ">处方信息</text>
					<u-icon name="question-circle" color="#BFBFBF" size="28"></u-icon>
				</view>
				<view class="right">
					<text class="u-type-error u-font-24 u-m-r-8">未填写</text>
					<u-icon name="arrow-right" color="#BFBFBF" size="24"></u-icon>
				</view>
			</view>
			<view class="bottom u-font-24 u-tips-color">
				据国家规定，此购药清单包含处方药，需填写处方信息
			</view>
		</view>
		<view class="order-goods">
			<view class="top">
				订单商品（{{order.goodsTotalNum}}件）
			</view>
			<view class="content" v-for="(item,index) in order.cartActivityList" :key="index">
				<view class="act" v-if="item.activityType !== 999">
					<tag  type="act" :activityType="item.activityType"/>
					<view class="u-m-l-16 u-main-color u-font-24">
						<actCartDescription  :type="item.activityType" :nowActivity="item.activityRule" />
					</view>
				</view>
				<view class="act u-main-color"  v-if="item.activityType == 999">
					普通商品
				</view>
				<view class="goods u-m-t-24" v-for="(v,i) in item.cartList" :key="i">
					<goods :goods="v"/>
				</view>
				<view class="goods u-m-t-24" v-if="item.activityRule && item.activityRule.giftList && item.activityRule.giftList.length > 0" v-for="(v,i) in item.activityRule.giftList" :key="v.id">
					<gift-goods :goods="v"/>
				</view>
				<view class="couponValue" v-if="item.activityAmount>0">
					优惠金额：-￥{{item.activityAmount}}
				</view>
			</view>
		</view>
		<view class="contactsInfo u-m-b-120">
			<view v-if="order.storeActivityAmount>0" class="item">
				<view class="left">店铺优惠</view>
				<view class="right u-type-error u-text-right u-font-bold">-￥{{order.storeActivityAmount}}</view>
			</view>
			<use-coupon :useCouponVO="order.useCouponVO" @checkCoupon="checkCoupon" />
			<view class="item">
				<view class="left">备注留言</view>
				<view class="right">
					<u-input v-model="condition.orderMessage" :border="false" placeholder="选填，请填写您的备注留言" placeholder-style="color:'#999'" :custom-style="{fontSize:'24rpx'}" />
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="left">
				<view class="u-font-28 u-main-color">
					应付金额
				</view>
				<view class="u-type-error">
					<text class="u-font-12 u-font-bold">￥{{condition.orderAmount-useCouponAmount}}</text>
					<text class="u-main-color u-font-12 u-m-l-16" v-if="condition.goodsTotalAmount - condition.orderAmount>0">共节省</text>
					<text class="u-font-12" v-if="condition.goodsTotalAmount - condition.orderAmount>0">￥{{(condition.goodsTotalAmount - condition.orderAmount) + useCouponAmount}}</text>
				</view>
			</view>
			<view class="right" @click="submitOrder">
				提交订单
			</view>
		</view>
		<u-popup v-model="liaisonShow" :z-index="11" mode="bottom" :border-radius="16" :closeable="true" @close="closeLiaisonShow" >
			<view class="liaisonShow">
				<view class="header u-text-center">
					选择联系人
				</view>
				<checkLiaison :default-value="defaultLiaison" @check="checkContect" />
			</view>
		</u-popup>
	</view>
</template>

<script>
	import tag from '@/components/activity/tag.vue'
	import actCartDescription from '@/components/activity/actCartDescripe.vue'
	import goods from "./components/goods.vue"
	import giftGoods from "./components/giftGoods.vue"
	import useCoupon from "./components/useCoupon.vue"
	import checkLiaison from '@/components/person/checkLiaison.vue'
	import { mapActions, mapState, mapMutations } from 'vuex';
	export default{
		components:{ tag, goods, checkLiaison, actCartDescription, giftGoods, useCoupon },
		data(){
			return{
				defaultLiaison:0,
				storeInfo:{},
				liaisonShow:false,
				useCouponAmount:0, // 使用优惠券金额
				condition:{
					storeId:uni.getStorageSync('storeId'),
					storeAddress:'',
					contactTel:'',
					contactUser:'',
					orderAmount:0,
					orderFrom:'0',
					orderPlatform:'1',
					orderType:'0',
					useCouponId:'',
					key:'',
					shippingCode:'',
					payType:'0',
					orderMessage:'',
				},
				order:{
					cartActivityList:[]
				}
			}
		},
		created() {
			this.init()
			this.order = uni.getStorageSync('order')
			this.storeInfo = uni.getStorageSync('storeInfo')
			this.condition.storeAddress = this.storeInfo.storeAddress
			if (
				this.order.useCouponVO && 
				this.order.useCouponVO.useCouponList && 
				this.order.useCouponVO.useCouponList.length >0
			){
				this.condition.useCouponId = this.order.useCouponVO.useCouponList[0].id
				this.useCouponAmount = parseFloat(this.order.useCouponVO.useCouponList[0].activityRule.couponAmount)
			}
		},
		mounted() {
			this.condition.cartIds=this.order.cartIds
			this.condition.orderAmount=this.order.orderAmount
			this.condition.orderType=this.order.orderType
			this.condition.goodsTotalAmount=this.order.goodsTotalAmount
			this.condition.key=this.order.key
		},
		computed:{
			...mapState({
				shoppingCodeList: state => state.shop.shoppingCodeList,
				payTypeList: state => state.shop.payTypeList,
				liaisonList: state => state.person.liaisonList,
			})
		},
		methods:{
			...mapActions(['ActGetAppDictList','ActSubmitOrder','ActGetCartList','ActGetCartCount','ActGetCartCoupon','ActGetLiaisonList']),
			...mapMutations(['GOODS_UPDATECARTNUM','STOREGOODS_UPDATECARTNUM']),
			checkContect(data){
				this.defaultLiaison = data
				this.condition.contactTel=this.liaisonList[data-1].telPhone
				this.condition.contactUser=this.liaisonList[data-1].name
				setTimeout(()=>this.liaisonShow = false,300)
				// this.liaisonShow = false
			},
			checkCoupon(data){
				this.condition.useCouponId = this.order.useCouponVO.useCouponList[data].id
				this.useCouponAmount = parseFloat(this.order.useCouponVO.useCouponList[data].activityRule.couponAmount)
			},
			closeLiaisonShow(){
				this.liaisonShow = false
			},
			async submitOrder(){
				const res = await this.ActSubmitOrder({...this.condition,orderAmount:this.condition.orderAmount - this.useCouponAmount})
				if(res.success){
					this.ActGetCartList({
						storeId:uni.getStorageSync('storeId')
					})
					this.ActGetCartCount({
						storeId:uni.getStorageSync('storeId')
					})
					this.ActGetCartCoupon({
						storeId:uni.getStorageSync('storeId')
					})
					let goodsList = []
					this.order.cartActivityList.map((item,index)=>{
						item.cartList.map((v,i)=>{
							goodsList.push({goodsId:v.goodsId,num:0})
						})
					})
					this.GOODS_UPDATECARTNUM(goodsList)
					this.STOREGOODS_UPDATECARTNUM(goodsList)
				}
			},
			async init(){
				// 获取配送方式字典
				this.ActGetAppDictList({
					dictType:'shipping_code',
					isCtr:'0'
				})
				// 获取支付方式字典
				this.ActGetAppDictList({
					dictType:'pay_type',
					isCtr:'0'
				})
				await this.ActGetAppDictList({
					dictType:'drug_relation',
					isCtr:'0'
				})
				await this.ActGetLiaisonList()
			},
		},
		watch:{
			shoppingCodeList(shoppingCodeList){
				this.condition.shippingCode = shoppingCodeList[0].dictValue
			},
			payTypeList(payTypeList){
				this.condition.payType = payTypeList[0].dictValue
			},
			liaisonList(liaisonList){
				if(liaisonList[0] && liaisonList[0].isDefault == 1){
					this.defaultLiaison = 1
					this.condition.contactTel=liaisonList[0].telPhone
					this.condition.contactUser=liaisonList[0].name
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order{
		height: 412rpx;
		background: linear-gradient(to bottom,$u-type-primary, rgba(56,151,255,0.00));
		padding: 24rpx;
		.u-m-b-120{
			margin-bottom: 120rpx;
		}
		.contactsInfo{
			background-color: #fff;
			padding: 0 24rpx;
			border-radius: 16rpx;
			margin-top: 16rpx;
			.item{
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom:1rpx solid $u-bg-color ;
				.left{
					font-weight: bold;
					font-size: 24rpx;
					color: $u-main-color;
					width: 140rpx;
				}
				.right{
					width: 510rpx;
				}
			}
			.item:last-child{
				border:none;
			}
		}
		.prescriptionInfo{
			background-color: #fff;
			padding:24rpx;
			border-radius: 16rpx;
			margin-top: 16rpx;
			.top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;
			}
		}
		.order-goods{
			margin-top: 16rpx;
			.top{
				padding: 0 24rpx;
				line-height: 88rpx;
				font-size: 28rpx;
				color: $u-main-color;
				font-weight: bolder;
			}
			.content{
				margin-bottom: 16rpx;
				background-color: #fff;
				padding:24rpx 24rpx 0 24rpx;
				border-radius: 16rpx;
				.act{
					display: flex;
					align-items: center;
				}
				.couponValue{
					line-height: 88rpx;
					text-align: right;
					font-weight: bold;
					color: $u-type-error;
				}
			}
		}
		.order-address{
			background-color: #fff;
			padding: 32rpx 24rpx;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				width: 80rpx;
				height: 80rpx;
				flex-shrink: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				background: $u-type-primary;
				border-radius: 100%;
			}
			.center{
				height: 80rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 32rpx;
				width: 500rpx;
			}
			.right{
				width: 48rpx;
				height: 48rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-shrink: 0;
			}
		}
		.footer{
			left: 0;
			width: 100%;
			position: fixed;
			bottom: 0;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			padding: 14rpx 24rpx;
			.right{
				color: #fff;
				background-color: $u-type-error;
				border-radius: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 72rpx;
				width: 190rpx;
			}
		}
		.liaisonShow{
			height: 70vh;
			.header{
				color: $u-main-color;
				line-height: 100rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}
</style>
